<template>
  <div class="aside">
    <div class="top">
      <span>图册类型</span>
      <div class="addtags" @click.prevent.stop="addPic">
        <img src="../../assets/images/add@2x.png" alt="" />
      </div>
    </div>
    <div class="search-wrap flex-center">
      <div class="search">
        <div class="icon-search"></div>
        <el-input
          size="mini"
          placeholder="搜索"
          v-model="filterText"
          maxlength="100"
        >
        </el-input>
      </div>
      <el-button
        type="primary"
        class="inputSearchBtn"
        size="mini"
        @click="confirmFilterTextFn"
        >搜索</el-button
      >
    </div>
    <el-tree
      ref="elTree"
      :data="dataTree"
      show-checkbox
      node-key="id"
      :default-expanded-keys="[]"
      :default-checked-keys="[]"
      :props="defaultProps"
      @check="treeCheck"
      @node-contextmenu="rightClick"
      :filter-node-method="filterNode"
    >
        <div class="custom-tree-node" slot-scope="{ node }" :title="node.label">
            {{ ellipsis(node , 15)}}
        </div>
    </el-tree>
    <!-- 右键单击    显示新增   重命名   删除-->
    <context-menu
      :target="contextMenuTarget"
      :show="contextMenuVisible"
      class="right-menu"
      @update:show="(show) => (contextMenuVisible = show)"
    >
      <a href="javascript:;" @click="addTree">新增</a>
      <a href="javascript:;" @click="editTree">重命名</a>
      <a href="javascript:;" @click="delTree">删除</a>
    </context-menu>
    <el-dialog
      :modal-append-to-body="false"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
    >
      <div class="item-con flex-center" v-show="dialogTitle == '新增'">
        <span class="label">新增级别:</span>

        <el-select v-model="choosedLevel" placeholder="请选择">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in levels"
            :key="index"
          ></el-option>
        </el-select>
        <!-- <div class="item">
          <div class="first flex-between">
            <span>{{
              choosedLevel ? choosedLevel : "新增同级或者下级目标（默认同级）"
            }}</span>
            <span class="arrow"></span>
          </div>
          <div
            class="dropdown flex-center-start"
            :class="[choosedLevel == '同级' ? 'active' : '']"
            @click="chooseLevel('同级')"
          >
            同级
          </div>
          <div
            class="dropdown flex-center-start"
            :class="[choosedLevel == '同级' ? '' : 'active']"
            @click="chooseLevel('下级')"
          >
            下级
          </div>
        </div> -->
      </div>
      <div class="item-con flex-center">
        <span class="label">图册名称:</span>
        <div class="item">
          <input
            maxlength="100"
            class="input"
            v-model="picTreeName"
            placeholder="请输入..."
          />
        </div>
      </div>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div class="confirm" @click="submit">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      filterText: "",
      dataTree: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "childrens",
        label: "atlasName",
      },
      flowTree: {
        root: [],
        props: {
          label: "name",
          children: "children",
        },
      },
      treeNodeData: "", // 存当前数据
      treeNode: "", // 存当前节点信息
      contextMenuVisible: false, // 让菜单显示
      contextMenuTarget: null,
      dialogVisible: false, //模态框默认隐藏
      dialogTitle: "", //模态框标题
      picTreeName: "",
      levels: ["同级", "下级"],
      // levels: [{
      //   name: "同级",
      //   id: 0
      // },{
      //   name: "下级",
      //   id: 1
      // },],
      choosedLevel: "同级", //选择的节点
    };
  },
  computed: {
    ...mapState({
      pictureTreeChecked(state) {
        return state.app.pictureTreeChecked; //获取全局 的图册目标树选择节点
      },
    }),
  },
  watch: {
    // filterText(val) {
    //   console.log(val);
    //   this.$refs.elTree.filter(val);
    // },
  },
  created() {
    this.tAtlasTypeInfoFindAllByTree(); //查询所有的类型 - 按照树形结构返回
  },
  methods: {
    ellipsis(node,len){
        if(node.label.length > len){
            return node.label.slice(0,len) + "" + "..."
        }else{
            return node.label
        }
    },
    confirmFilterTextFn() {
      this.$refs.elTree.filter(this.filterText);
    },
    async tAtlasTypeInfoFindAllByTree() {
      let data = await this.$api.tAtlasTypeInfoFindAllByTree();
      this.dataTree = data;
      console.log(data);
      // this.defaultCheckedKeys = [data[0].childrens[0].id];
      this.$store.commit("app/setPictureTreeChecked", []);
      console.log(this.pictureTreeChecked);
      // this.dataTree = data.map((item) => {
      //   return {
      //     id: item.id,
      //     label: item.targetName,
      //   };
      // });
    },
    filterNode(value, dataTree) {
      console.log(value, dataTree);
      if (!value) return true;
      return dataTree.atlasName.indexOf(value) !== -1;
    },
    chooseLevel(e) {
      this.choosedLevel = e;
    },
    editTree() {
      //编辑 图册类型树
      this.dialogVisible = true;
      this.contextMenuVisible = false;
      console.log("deleteDatabaseOrTable", this.treeNodeData, this.treeNode);
      this.dialogTitle = "编辑";
      this.picTreeName = this.treeNodeData.atlasName;
    },
    addTree() {
      // 单击新增让新增弹框显示
      this.dialogTitle = "新增";
      this.dialogVisible = true;
      this.contextMenuVisible = false;
      console.log("deleteDatabaseOrTable", this.treeNodeData, this.treeNode);
    },
    delTree() {
      this.$confirm("此操作将永久删除该图册类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //删除树节点
          this.contextMenuVisible = false;
          console.log(
            "deleteDatabaseOrTable",
            this.treeNodeData,
            this.treeNode
          );
          this.$api
            .tAtlasTypeInfoDeleteType({
              id: JSON.stringify(this.treeNodeData.id),
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功",
                showClose: true
              });
              this.tAtlasTypeInfoFindAllByTree();
            });
        })
        .catch(() => {});
    },
    submit() {
      //新增类型树  请先选择类型
      if (this.dialogTitle == "新增") {
        if (this.choosedLevel == "") {
          this.$message({
            type: "warning",
            message: "请选择新增级别！",
            showClose: true
          });
          return;
        }
        if (this.picTreeName == "") {
          this.$message({
            type: "warning",
            message: "请输入图册名称！",
            showClose: true
          });
          return;
        }
        if (this.choosedLevel == "同级") {
          // if (this.treeNode.level == 1) {
          //   console.log(123);
          // } else {
          this.$api
            .tAtlasTypeInfoSaveType({
              atlasName: this.picTreeName,
              pid: this.treeNodeData.pid,
            })
            .then(() => {
              this.dialogVisible = false;
              this.tAtlasTypeInfoFindAllByTree();
              this.picTreeName = "";
            });
          // }
        }
        if (this.choosedLevel == "下级") {
          console.log(89, this.treeNodeData.id);
          this.$api
            .tAtlasTypeInfoSaveType({
              atlasName: this.picTreeName,
              pid: this.treeNodeData.id,
            })
            .then(() => {
              this.dialogVisible = false;
              this.tAtlasTypeInfoFindAllByTree();
              this.picTreeName = "";
            });
        }
      } else if (this.dialogTitle == "编辑") {
        if (!this.picTreeName) {
          this.$message({
            type: "warning",
            message: "图册名称不能为空！",
            showClose: true
          });
          return;
        }
        this.editDialog();
        this.dialogVisible = false;
        this.tAtlasTypeInfoFindAllByTree();
        console.log("编辑");
      } else if (this.dialogTitle == "新增图册类型") {
        this.$api
          .tAtlasTypeInfoSaveType({
            atlasName: this.picTreeName,
            pid: 0,
          })
          .then((res) => {
            if (res == "新增成功!") {
              this.dialogVisible = false;
              this.picTreeName = "";
              this.tAtlasTypeInfoFindAllByTree();
              this.$message({
                type: "success",
                message: res,
                showClose: true
              });
            } else {
              this.$message({
                type: "warning",
                message: res,
                showClose: true
              });
            }
          });

        console.log("编辑");
      }
    },

    treeCheck(now, checked) {
      console.log(444, now, checked);
      this.$store.commit("app/setPictureTreeChecked", checked.checkedKeys);
    },
    rightClick(e, data, node) {
      this.treeNodeData = data; // 存当前数据
      this.treeNode = node; // 存当前节点信息
      console.log("rightClick", this.treeNodeData, this.treeNode);
      this.contextMenuVisible = true; // 让菜单显示
      // console.log("0", e, "1", e.screenX, "2", e.screenY);
      const ele = document.querySelector(".right-menu");
      // 72 为 元素 .right-menu 固定高度
      if (document.documentElement.clientHeight - e.clientY < 72) {
        ele.style.top = `${document.documentElement.clientHeight - 72}px`;
      } else {
        ele.style.top = `${e.clientY}px`;
      }
      ele.style.position = "fixed";
      ele.style.left = `${e.clientX + 10}px`; //根据鼠标点击位置设置菜单出现
    },
    // 添加根节点
    addPic() {
      this.dialogVisible = true;
      this.dialogTitle = "新增图册类型";
    },
    async editDialog() {
      let data = await this.$api.tAtlasTypeInfoUpdateType({
        atlasName: this.picTreeName,
        id: this.treeNodeData.id,
      });
      console.log(data);
      this.tAtlasTypeInfoFindAllByTree();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.aside {
  z-index: 2000;
  width: 2.87rem;
  position: fixed;
  left: 0;
  bottom: 0;
  height: calc(100vh - 0.76rem);
  background: url(~@/assets/common/rectangle3.png) no-repeat;
  background-size: 105% 100%;
  background-position: center;
  color: #cccccc;
  .top {
    padding-left: 0.2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    border-bottom: 1px solid #858585;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    .addtags {
      width: 0.25rem;
      height: 0.25rem;
      // border: 1px dashed #ffffff;
      cursor: pointer;
      margin: 0.16rem 0.3rem;
      > img {
        width: 0.23rem;
      }
    }
  }
  .search-wrap {
    width: 2.7rem;
    display: flex;
    margin: 0.06rem auto;
    align-items: center;
  }
  .search {
    // height: 0.42rem;
    background: #034576;
    border-radius: 0.03rem;
    display: flex;
    align-items: center;
    margin-right: 5px;
    .icon-search {
      margin: 0.1rem 0.12rem;
      background-image: url(~@/assets/images/search@2x.png);
      width: 0.14rem;
      height: 0.15rem;
      flex: 0 0 0.14rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    ::v-deep .el-input {
      // height: 0.32rem;
      background: #034576;
      // margin: 0.02rem 0 0.01rem -0.12rem;
      font-size: 0.16rem;
      font-weight: 400;
      .el-input__inner {
        color: white !important;
        background: #034576;
        border: none;
        outline: none;
        padding: 0 8px;
      }
    }
  }
  ::v-deep .el-tree {
    @include scrollBar;
    overflow: auto;
    height: calc(100vh - 1.82rem);
    color: #cccccc;
    margin-top: 0.1rem;
    background: transparent;
    .el-tree-node:focus > .el-tree-node__content {
      background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
      background-position: top;
      background-size: 100%; //背景色
    }
    // 文字超出换行
    .el-tree-node {
      white-space: normal;
      .el-tree-node__content {
        // height: 100%;
        align-items: center;
      }
    }
    .el-tree-node__content {
      height: auto;
      min-height: 0.5rem;
      &:hover {
        background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
        background-position: 100% 100%;
        background-size: 100%;
      }
    }
    .el-tree-node__label {
      font-size: 0.16rem;
      color: #cccccc;
      line-height: 0.25rem;
      letter-spacing: 1px;
    }
  }
  ::v-deep .el-dialog {
    color: #ffffff;
    font-size: 0.16rem;
    width: 7.2rem !important;
    background: #474747;
    box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
    border-radius: 0.05rem;
    z-index: 10000;
    .el-dialog__header {
      padding: 0.16rem;
      background: #143853 !important;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      color: #ffffff;
      background: #0f2d43 !important;
    }
    .item-con {
      color: #ffffff;
      // margin-left: 0.48rem;
      margin-bottom: 0.2rem;
      .label {
        // margin-top: 0.1rem;
      }
      .first {
        margin-bottom: 0.06rem;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        .arrow {
          margin-top: 0.03rem;
          margin-right: 0.13rem;
          height: 0.12rem;
          width: 0.12rem;
          border-left: 0.06rem solid transparent;
          border-top: 0.06rem solid #cccccc;
          border-right: 0.06rem solid transparent;
          border-bottom: 0.06rem solid transparent;
        }
      }
      .dropdown {
        margin-bottom: 0.01rem;
        &.active {
          color: #1890ff;
          background: #034576;
        }
        &:hover {
          color: #1890ff;
          background: #034576;
        }
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
      }
      .el-input__inner {
        color: white;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
        border: none;
      }
      .el-popper .popper__arrow,
      .el-popper .popper__arrow::after {
        display: none;
      }
      .el-input__suffix {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .input {
        color: white;
        margin-left: 0.12rem;
        padding-left: 0.12rem;
        cursor: pointer;
        // width: 4.6rem;
        width: 5.2rem;
        height: 0.38rem;
        background: #0355a4 !important;
        border-radius: 0.05rem;
      }
      .el-button {
        width: 1.2rem;
        height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
    }
    .footer {
      margin-top: 0.3rem;
      color: #ffffff;
      margin-right: 0.3rem;
      justify-content: flex-end;
      .cancel {
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #62656c;
        border-radius: 0.05rem;
      }
      .confirm {
        margin-left: 0.2rem;
        text-align: center;
        width: 1.2rem;
        height: 0.38rem;
        line-height: 0.38rem;
        background: #1890ff;
        border-radius: 0.05rem;
      }
    }
  }
}

#dataPage {
  margin: 0 0;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
// 右键会选中文字，为了美观将它禁用
#el-tree {
  user-select: none;
}
.right-menu {
  font-size: 0.14rem;
  position: fixed;
  background: rgba(98, 98, 98, 0.79);
  /*border: solid 0.01rem rgba(0, 0, 0, .2);*/
  border-radius: 0.04rem;
  font-size: 0.14rem;
  z-index: 999;
  display: none;
}
.right-menu a {
  width: 1.5rem;
  height: 26px;
  line-height: 26px;
  text-align: center;
  display: block;
  color: #ffffff;
  padding: 0.02rem;
}
.right-menu a:hover {
  background: url(~@/assets/common/rectangle821.png) no-repeat; //背景色
  background-position: 100% 100%;
  background-size: 100% 100%;
  color: #1890ff;
}
a {
  text-decoration: none;
}
::v-deep.el-popup-parent--hidden {
  display: none;
}
body {
  .v-modal {
    z-index: -1 !important;
  }
}
</style>